<template>
  <FormView
    v-model="entity"
    :title="!entity.id ? '新建任务盘点计划' : '修改任务盘点计划'"
    :toolbar-attrs="{ buttons: ['back', 'save', 'cancel'] }"
    :toolbar-listeners="{ save: persist }">
    <template #toolbar-right>
    </template>
    <FormHolder ref="form" label-width="110px" :model="entity" :disabled="entity.status !=='0'">
      <FormItemGroup block-title="基本信息">
        <FormInput
          v-model="entity.subject"
          prop="subject"
          label="名称"
          required
          :span="24"
          max-length="255"/>
        <FormDatePicker
          v-model="entity.startTime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          required
          label="开始时间"
          prop="startTime"/>
        <FormDatePicker
          v-model="entity.endTime"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          required
          label="结束时间"
          prop="endTime"/>
        <FormSelect
          v-model="entity.status"
          prop="status"
          disabled
          dict-type="inventorytask_status"
          label="状态"
          :span="12"/>
        <FormSelect
          v-model="entity.type"
          prop="type"
          dict-type="inventorytask_type"
          required
          label="类型"
          :span="12"
          max-length="255"/>
        <FormInput
          v-show="false"
          v-model="entity.typeIds"
          prop="typeIds"
          label="类型IDS"
          :span="24"
          max-length="255"/>
        <FormInput
          v-show="entity.type !== 'all'"
          v-model="entity.typeName"
          prop="typeName"
          label="类型名称"
          :span="24"
          max-length="255"
          @focus="onTypeFocus">
          <template #append>
            <ElButton type="button" style="padding-right: 10px;" @click="isShowOuInfoDialog = true">选择</ElButton>
          </template>
        </FormInput>
        <FormSelect v-model="entity.assetStatusTemp" :multiple="true" prop="assetStatusTemp" label="资产状态" dict-type="asset_status" required @change="assetStatusChange" span="24" />
        <FormTextarea
          v-model="entity.description"
          prop="description"
          label="说明"
          :span="24"
          max-length="2000"/>
      </FormItemGroup>
      <FormItemGroup :gutter="0" block-title="资产清单">
        <InventoryTaskAsset v-if="entity.id" :inventory-task-id="entity.id" style="height: 600px;"/>
      </FormItemGroup>
      <FormItemGroup :gutter="0" block-title="盘点事项">
        <WorkItem v-if="entity.id" :form-id="entity.id" style="height: 500px;"/>
      </FormItemGroup>
    </FormHolder>
    <DepartmentPicker :visible.sync="isShowOuInfoDialog" :is-multiple="true" @confirm="selectOuInfoSuccess"/>
  </FormView>
</template>

<script>
  import { create, load, save, update } from '@/api/inventory/inventoryTask'
  import form from '@/vue/mixin/form'
  import InventoryTaskAsset from '@/module/inventory/InventoryTaskAsset'
  import WorkItem from '@/module/workItem/WorkItem'

  export default {
    name: 'InventoryTaskForm',
    relativeViewId: 'InventoryTask',
    components: {
      InventoryTaskAsset,
      WorkItem
    },
    mixins: [form],
    data() {
      return {
        entity: {
          id: '',
          unid: '',
          createId: '',
          createBy: '',
          createTime: '',
          deptId: '',
          deptFullname: '',
          updateBy: '',
          updateTime: '',
          subject: '',
          startTime: null,
          endTime: null,
          status: '',
          type: '',
          orderNo: '',
          typeIds: '',
          typeName: '',
          assetStatusTemp: [],
          description: ''
        },
        isShowOuInfoDialog: false
      }
    },
    methods: {
      create,
      load,
      save,
      update,
      selectOuInfoSuccess(node) {
        this.entity.typeIds = node.map(item => item.id).join(',')
        this.entity.typeName = node.map(item => item.name).join(',')
      },
      onTypeFocus() {
        this.isShowOuInfoDialog = this.entity.type === 'unit'
      },
      assetStatusChange() {
        this.entity.assetStatus = this.entity.assetStatusTemp.join(",")
      }
    }
  }
</script>
